<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="供应商名称">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="供应商编号">
              <span>{{ props.row.usernumber }}</span>
            </el-form-item>
            <el-form-item label="采购编号">
              <span>{{ props.row.buynumber }}</span>
            </el-form-item>
            <el-form-item label="商品规格">
              <span>{{ props.row.standerd }}</span>
            </el-form-item>
            <el-form-item label="商品类型">
              <span>{{ props.row.type }}</span>
            </el-form-item>
            <el-form-item label="商品单价">
              <span>{{ props.row.orderprice }}</span>
            </el-form-item>
            <el-form-item label="供货数量">
              <span>{{ props.row.ordernum }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="订单编号"
          prop="ordernumber">
      </el-table-column>
      <el-table-column
          label="订单日期"
          prop="orderdate">
      </el-table-column>
      <el-table-column
          label="商品名"
          prop="goodsname">
      </el-table-column>
      <el-table-column
          label="订单状态"
           >
        <template slot-scope="scope">
          <span v-if="scope.row.state==0">未付款</span>
          <span v-if="scope.row.state==1">已入库</span>
          <span v-if="scope.row.state==2">已付款</span>
          <span v-if="scope.row.state==3">已发货</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="发送货物"
          width="100">
        <template slot-scope="scope">
          <el-button @click="open(scope.row)" type="text" size="small">发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<script>
export default {
  name: "OrderView",
  data(){
    return{
      tableData: [],
      pageSize:5,
      pageTotal:0,
      currentPage:1,
    }
  },mounted() {
    this.init();
  },methods:{
    init(){
      this.$axios("/psc/order/getOrderByPage/"+this.currentPage+"/"+this.pageSize+"/"+sessionStorage.getItem("userNumber")+"").then(
          r=>{
            console.log(r.data)
            this.tableData=r.data.list;
            this.pageTotal=r.data.pageTotal;
          }
      )
    },
    handleSizeChange(val){
      this.pageSize=val;
      this.init()
    },handleCurrentChange(val){
      this.currentPage=val
      this.init()
    },open(row){
      this.$alert('你确定要发货嘛？', '供货信息', {
        confirmButtonText: '确定',
        callback: action  => {
          console.log(action)
          this.handleClick(row);
        }
      });
    },handleClick(row){
      if(row.state!=2){
        if(row.state==0){
          this.$message.warning("订单未付款，请等待付款")
        }else if(row.state==1){
          this.$message.warning("订单已入库")
        }else if(row.state==3){
          this.$message.warning("订单已发货")
        }
      }else {
        let fd=new FormData();
        fd.append("orderNumber",row.ordernumber);
        this.$axios.post("/psc/order/supply2",fd).then(
            r=>{
              if(r.data==true){
                this.$message.success("发起货物成功")
                this.init();
              }else {
                this.$message.success("发起货物失败，请重写发起")
              }
            }
        )
      }
    }
  }
}
</script>

<style scoped>

</style>